<template>
  <div class="page-content">
    <el-card class="box-card">
      <el-form ref="ruleForm" label-width="100px" :inline="true" :model="formData" :rules="rules">
        <el-row :gutter="15">
          <el-col :span="20">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="计划开始时间" prop="date2">
              <el-date-picker v-model="formData.date1" type="date" placeholder="选择日期" style="width:200px;" />
            </el-form-item>
            <el-form-item label="实际审计时间" prop="date2">
              <el-date-picker v-model="formData.date2" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="检查分数">
              <el-input v-model="formData.name" placeholder="检查分数" />
            </el-form-item>
            <el-form-item label="关联版本">
              <el-select v-model="formData.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="检查评级">
              <el-select v-model="formData.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button icon="el-icon-refresh-right">重置</el-button>
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider />
      <div>
        <div class="right-align mb15"><el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button></div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="date"
            label="日期"
          />
          <el-table-column
            prop="name"
            label="姓名"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
          <el-table-column
            label="状态"
            width="180"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.$index%2===0" type="success">已整改</el-tag>
              <el-tag v-else type="warning">待整改</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleView(scope.$index, scope.row)"
              >查看</el-button>
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-popconfirm
                class="ml10"
                title="确定删除？"
                @confirm="handleDelete(scope.$index, scope.row)"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger"
                >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="self-pagination">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="600"
    >
      <el-form ref="ruleForm1" label-width="100px" inline :model="addFormData" :rules="addRules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addFormData.name" placeholder="请输入名称" style="width:200px;" />
        </el-form-item>
        <el-form-item label="关联版本">
          <el-select v-model="addFormData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始时间" prop="date2">
          <el-date-picker v-model="addFormData.date1" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="实际审计时间" prop="date2">
          <el-date-picker v-model="addFormData.date2" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="检查分数">
          <el-input v-model="addFormData.name" placeholder="检查分数" style="width:200px;" />
        </el-form-item>
        <el-form-item label="检查评级">
          <el-select v-model="addFormData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addFormData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formData.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getInfo } from '@/api/user' 接口引入
export default {
  name: 'Home',
  data() {
    return {
      formData: {
        name: '',
        region: '',
        date1: '',
        date2: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      addFormData: {
        name: '',
        region: '',
        date1: '',
        date2: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      multipleSelection: [],
      dialogVisible: false,
      currentPage: 1,
      addDialogVisible: false
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    formReset() {
      this.$refs.ruleForm.resetFields()
    },
    search() { // 搜索
      console.log(this.formData)
    },
    handleSelectionChange(val) { // 表格多选
      this.multipleSelection = val
    },
    handleAdd() { // 新增
      this.addDialogVisible = true
    },
    handleView(index, row) { // 查看
      this.dialogVisible = true
      console.log(index, row)
    },
    handleEdit(index, row) { // 编辑
      this.addDialogVisible = true
      console.log(index, row)
    },
    handleDelete(index, row) { // 删除
      console.log(index, row)
      this.$confirm('确认删除？')
        .then(_ => {
          console.log('已删除')
        })
        .catch(_ => {})
    },
    handleSizeChange(val) { // 分页中每页条数改变触发
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 切换分页
      this.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
